<template>
  <div class="unity-body-div deviceDetails body-bg">
    <close @click.native="toClose"></close>
    <big-center-title :title="pageTitle"></big-center-title>
    <div class="unity-body-center-body-btn" style="height: calc(100% - 90px);">
      <div class="unity-body-center-left-btn">
        <div class="unity-body-center-left-btn-center">
          <div class="unity-body-center-left-tab">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane
                v-for="(item, ind) in watchTypeList"
                :label="item.name"
                :name="item.name"
                :key="ind"
              ></el-tab-pane>
            </el-tabs>
          </div>
          <div class="unity-body-center_tablee" style="padding: 0  2.4vw;">
            <el-row class="device-monitor-list">
              <el-col :span="12">
                <div class="device-monitor-item">
                  <span> {{ typeObj.str }} </span>
                  <span v-show="t_index == 0">m</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="device-monitor-item">
                  采集时间：
                  <span>
                    {{ typeObj.time }}
                  </span>
                </div>
              </el-col>
            </el-row>
          </div>
          <!-- 水库水位 折线图 -->
          <div class="unity-body-center-left-gun" v-show="t_index == 0">
            <div
              class="unity-body-center"
              style="position: relative;"
              v-loading="!islook"
              element-loading-background="rgba(0, 0, 0, 0)"
            >
              <div class="change_date">
                <div
                  :class="
                    index == datecheck ? 'choosedate' : 'change_date_item'
                  "
                  v-bind:key="index"
                  v-for="(item, index) in alldate"
                  @click="changeDate(index)"
                >
                  {{ item }}
                </div>
              </div>
              <div class="chart" v-if="islook">
                <div
                  style="width:100%;height:320px;z-index:9999999"
                  ref="main"
                  v-if="isShowGZ == false"
                ></div>
                <div v-else class="guzhang" style="color: red;">
                  暂无数据
                </div>
              </div>
            </div>
            <div
              style="color: red;margin-top: 5px;font-size: 14px;"
              v-if="t_index == 0"
            >
              真实数据截止到9月26日，该数据为假数据
            </div>
          </div>
          <!-- 大坝渗流 柱状图 -->
          <div class="unity-body-center-left-gun" v-show="t_index == 1">
            <div
              class="unity-body-center"
              style="position: relative;"
              v-loading="!islook"
              element-loading-background="rgba(0, 0, 0, 0)"
            >
              <div class="change_date">
                <div
                  :class="
                    index == datecheck ? 'choosedate' : 'change_date_item'
                  "
                  v-bind:key="index"
                  v-for="(item, index) in alldate"
                  @click="changeDate(index)"
                >
                  {{ item }}
                </div>
              </div>
              <div class="chart" v-if="islook">
                <div
                  style="width:100%;height:320px;z-index:9999999"
                  ref="main2"
                  v-if="isShowGZ == false"
                ></div>
                <div v-else class="guzhang" style="color: red;">
                  暂无数据
                </div>
              </div>
            </div>
            <div
              style="color: red;margin-top: 5px;font-size: 14px;"
              v-if="t_index == 0"
            >
              真实数据截止到9月26日，该数据为假数据
            </div>
          </div>

          <!-- 以外别的 柱状图 -->
          <div
            class="unity-body-center-left-gun"
            v-show="
              t_index == 2 || t_index == 3 || t_index == 4 || t_index == 5
            "
          >
            <div
              class="unity-body-center"
              style="position: relative;"
              v-loading="!islook"
              element-loading-background="rgba(0, 0, 0, 0)"
            >
              <div class="change_date">
                <div
                  :class="
                    index == datecheck ? 'choosedate' : 'change_date_item'
                  "
                  v-bind:key="index"
                  v-for="(item, index) in alldate"
                  @click="changeDate(index)"
                >
                  {{ item }}
                </div>
              </div>
              <div class="chart" v-if="islook">
                <div
                  style="width:100%;height:320px;z-index:9999999"
                  ref="main3"
                  v-if="isShowGZ == false"
                ></div>
                <div v-else class="guzhang" style="color: red;">
                  暂无数据
                </div>
              </div>
            </div>
            <div
              style="color: red;margin-top: 5px;font-size: 14px;"
              v-if="t_index == 0"
            >
              真实数据截止到9月26日，该数据为假数据
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import StringUtils from '../../utils/string'
import UnityIm from '../../utils/unityIm'
import bigCenterTitle from '@/components/unityweb/big-center-title'
import close from '@/components/unityweb/close'
import Model3dShow from '../components/model-3d-show.vue'

export default {
  name: 'deviceDetails',
  components: {
    bigCenterTitle,
    close,
    Model3dShow: Model3dShow
  },
  data() {
    return {
      pageTitle: '设备监测',
      typeObj: {},

      equipmentDetial: {},
      monitorList: [],

      monitorTypeObj: {}, //res.data
      activeName: '',
      watchTypeInd: 0,
      watchTypeObj: {
        key: '',
        id: -1,
        name: ''
      },
      watchTypeList: [],
      t_index: 0, //外层Index

      photoArr: [],
      //筛选条件
      // alldate: [
      //   {
      //     type: "hour",
      //     name: "1天"
      //   },
      //   {
      //     type: "day",
      //     name: "7天"
      //   },
      //   {
      //     type: "week",
      //     name: "1月"
      //   }
      // ],
      alldate: [],
      //对应下标
      datecheck: 0,
      //保存Id
      params: '',
      islook: true,
      isShowGZ: false //是否故障
    }
  },
  created() {
    var _this = this

    // _this.u_getToken({
    //   site_id: 1,
    //   device_id: 7,
    //   device_type: 2,
    //   type: 2
    // });
    _this.u_getToken({
      id: 1
    })
  },
  mounted() {
    window.addEventListener('message', event => {
      //event.data获取传过来的数据
      let _obj = event.data
      let method_name = _obj.methodName || ''
      let paramsStr = _obj.parameterData || ''
      let params = StringUtils.toJson(paramsStr)
      if (_obj.managerType == 'open') {
        this.openHandler(method_name, params)
      } else if (_obj.managerType == 'close') {
      } else if (_obj.managerType == 'cancelSelected') {
      }
    })
    if (window.vuplex) {
      this.addMessageListener20()
    } else {
      // 初始化侦听器
      window.addEventListener('vuplexready', this.addMessageListener20)
    }
  },
  methods: {
    // TODO 告诉unity关闭网页
    toClose() {
      UnityIm.closePanelManager('equipmentMonitoring')
    },
    addMessageListener20() {
      UnityIm.receiveUnityOpenMessage((method_name, params) => {
        this.openHandler(method_name, params)
      })
    },
    openHandler(method_name, params) {
      switch (method_name) {
      case 'equipmentMonitoring':
        this.u_getToken(params)
        break
      }
    },

    handleClick(tab, event) {
      this.t_index = tab.index
      // console.log("大分类t_index:", this.t_index);
      this.datecheck = 0
      this.getDatas()
      // console.log(this.watchTypeList[tab.index]);
      // this.choose(this.watchTypeList[tab.index], tab.index);

      // this.$nextTick(() => {
      //   this.choose(this.watchTypeList[tab.index], this.t_index);
      // });
    },
    // // 选择的哪项
    // choose(item, index) {
    //   this.Bac = index;
    //   this.watchTypeInd = index;
    //   this.watchTypeObj = item;
    //   this.changer();
    // },
    // changer() {
    //   var _this = this;
    //   if (_this.t_index == 0) {
    //     _this.$nextTick(() => {
    //       this.chartDetial(this.monitorTypeObj[this.watchTypeInd]);
    //     });
    //   } else {
    //     _this.$nextTick(() => {
    //       this.chartDetial(this.monitorTypeObj[this.watchTypeInd]);
    //     });
    //   }

    //   // console.log(JSON.stringify(this.monitorTypeObj[this.watchTypeInd]));
    //   // if (
    //   //   this.monitorTypeObj &&
    //   //   this.monitorTypeObj[this.watchTypeInd] &&
    //   //   this.monitorTypeObj[this.watchTypeInd].y_value.length < 0
    //   // ) {
    //   //   this.isShowGZ = true;
    //   // }
    //   // 获取上层数据
    //   this.getMonitorListBy();
    // },

    u_getToken(params) {
      var _this = this
      _this.equipment_query(params)
      // 图表数据
      // _this.safe_realtime_history(params);
      // // 获取上层数据
      // _this.getMonitorListBy(params);
    },

    // 图表数据
    safe_realtime_history(params, isfilst = true) {
      var _this = this
      /*  _this.params = params
       var datas = {
         id: params.id,
         time: _this.alldate[_this.datecheck].type
       }
       // _this.$apis.u_device_date(datas).then(res => {
       _this.$apis.u_device_date_v3(datas)
         .then(res => {
           if (res.result == 0) {
             // var data = res.data;
             _this.monitorTypeObj = res.data
             _this.watchTypeList = _this.monitorTypeObj

             this.islook = true
             if (_this.watchTypeList.length != 0) {
               if (isfilst) {
                 // element的标签
                 _this.activeName = _this.watchTypeList[0].key_name
                 // console.log(_this.activeName)
                 // 某项
                 this.watchTypeInd = 0
                 this.watchTypeObj = _this.monitorTypeObj[this.watchTypeInd]
                   || []
                 // console.log(this.watchTypeObj);
               }
               _this.$nextTick(() => {
                 this.changer()
               })

             } else {
               let datas = {
                 x_value: [],
                 y_value: []
               }
               let unit = ''
               this.watchTypeObj = {
                 key_name: '',
                 key_unit: '',
                 key_value: '',
                 time: ''
               }
               _this.$nextTick(() => {
                 this.chartDetial(datas, unit)
               })

             }
           } else {
             let datas = {
               x_value: [],
               y_value: []
             }
             let unit = ''
             this.watchTypeObj = {
               key_name: '',
               key_unit: '',
               key_value: '',
               time: ''
             }
             this.chartDetial(datas, unit)
           }
         }) */

      // console.log("_this.watchTypeList:", _this.watchTypeList);
      // console.log(":this.t_index:", this.t_index);
    },
    // 返回X小时前
    timeXiaoShi(item) {
      var currentDateTime = new Date()
      var pastHour = new Date(
        currentDateTime.getTime() - item * 60 * 60 * 1000
      )
      var formattedHour = pastHour
        .getHours()
        .toString()
        .padStart(2, '0')
      return formattedHour
    },
    // 返回X天前
    timeYUE(item) {
      // 指定天数
      var today = new Date()
      var daysAgo = item
      var targetDate = new Date(today)
      targetDate.setDate(today.getDate() - daysAgo)
      // 格式化 XX 天前的日期，使用 '-' 进行分割
      var formattedDate = targetDate
        .toLocaleDateString(undefined, {
          month: '2-digit',
          day: '2-digit'
        })
        .replace(/\//g, '-')
      return formattedDate
    },
    // 当前时间
    tiemDangQian() {
      var currentDate = new Date()
      var year = currentDate.getFullYear()
      var month = (currentDate.getMonth() + 1).toString()
        .padStart(2, '0') // 月份从0开始，加1并补零
      var day = currentDate
        .getDate()
        .toString()
        .padStart(2, '0')
      var hours = currentDate
        .getHours()
        .toString()
        .padStart(2, '0')
      var minutes = currentDate
        .getMinutes()
        .toString()
        .padStart(2, '0')
      var seconds = currentDate
        .getSeconds()
        .toString()
        .padStart(2, '0')
      var formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
      return formattedDateTime
    },
    //时间转换
    timezh(item) {
      let res = '--'
      if (!item) {
        return res
      }
      const date = item ? new Date(item) : new Date()
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      var h = date.getHours()
      h = h < 10 ? '0' + h : h
      var minute = date.getMinutes()
      minute = minute < 10 ? '0' + minute : minute
      var second = date.getSeconds()
      second = second < 10 ? '0' + second : second
      res = y + '-' + m + '-' + d
      return res
    },
    getMonitorListBy(params) {
      /*     let data = {
            // equipment: params.device_id
            equipment: params.id
          }
          this.$apis.u_device_monitor_list(data)
            .then(res => {
              let resData = res.data || []
              // console.log(resData);
              let tempArr = resData.map(item => {
                return Object.assign(item, {
                  isCustom: false
                })
              })
              // console.log("monitor list==", tempArr);
              this.monitorList = tempArr
              let equipmentData = {
                state: this.equipmentDetial.state
              }
              this.monitorList.unshift(equipmentData)
            }) */
      var _this = this
      this.monitorList = [
        {
          state: 0
        },
        {
          name: '采集时间',
          value: '2023-11-21'
          // value: this.monitorTypeObj[this.watchTypeInd].time
        }
      ]
    },
    //获取详情
    equipment_query(params) {
      var _this = this
      _this.$apis.yw_site_type()
        .then(res => {
          if (res.result == 0) {
            // _this.ids = res.data.id;
            // console.log("res.data:", res.data);
            // 规定的排序顺序  原1大坝安全 2大坝渗流 3东放水洞倾斜 4水库水位 5西放水洞倾斜 6溢洪闸安全 改为423156顺序
            var sortOrder = [4, 2, 3, 1, 5, 6]
            var sortedArray = res.data.sort(
              (a, b) => sortOrder.indexOf(a.id) - sortOrder.indexOf(b.id)
            )
            console.log('sortedArray==============', sortedArray)
            // _this.watchTypeList = res.data;
            // _this.watchTypeList = sortedArray;
            _this.watchTypeList = [
              {
                'id': 4,
                'name': '水库水位',
                'unit': 'm'
              },

              {
                'id': 2,
                'name': '大坝渗流',
                'unit': 'm'
              },
              {
                'id': 3,
                'name': '东放水洞倾斜',
                'unit': 'm'
              },
              {
                'id': 1,
                'name': '大坝安全',
                'unit': 'm'
              },
              {
                'id': 5,
                'name': '西放水洞倾斜',
                'unit': 'm'
              },
              {
                'id': 6,
                'name': '溢洪闸安全',
                'unit': 'm'
              },]
            // 标题
            _this.equipmentDetial = res.data
            // _this.pageTitle = _this.equipmentDetial.name || _this.pageTitle;
            // 默认选中
            this.activeName = _this.watchTypeList[this.t_index].name

            // _this.pageTitle = "";
            _this.equipmentDetial = {}

            // this.watchTypeInd = this.t_index;
            // this.watchTypeObj = _this.monitorTypeObj[this.watchTypeInd];
            _this.$nextTick(() => {
              // this.changer();
              this.getDatas()
            })
          }
        })

      _this.pageTitle = '设备监测数据'
    },
    // 处理数据
    getDatas() {
      var _this = this
      var datas = {
        type: _this.watchTypeList[this.t_index].id,
        s_type: _this.datecheck + 1 //下标+1
      }
      _this.$apis.yw_site_data(datas)
        .then(res => {
          if (res.result == 0) {
            this.typeObj = res.data
            this.alldate = res.data.arr

            // 单位
            if (_this.t_index == 0) {
              this.typeObj.unit = 'm'
            }
            if (_this.t_index == 1) {
              this.typeObj.unit = 'm'
            }
            if (_this.t_index == 2) {
              this.typeObj.unit = '°'
            }
            if (_this.t_index == 3) {
              this.typeObj.unit = 'mm'
            }
            if (_this.t_index == 4) {
              this.typeObj.unit = '°'
            }
            if (_this.t_index == 5 && _this.datecheck == 0) {
              this.typeObj.unit = '°'
            }
            if (_this.t_index == 5 && _this.datecheck == 1) {
              this.typeObj.unit = '°'
            }
            if (_this.t_index == 5 && _this.datecheck == 2) {
              this.typeObj.unit = 'mm'
            }
            // console.log("_this.t_index:", _this.t_index);
            // console.log("_this.typeObj:", _this.typeObj);
            // 0水库水位
            if (_this.t_index == 0) {
              if (_this.typeObj.y_value.length == 0) {
                this.isShowGZ = true
              }
              _this.$nextTick(() => {
                this.chartDetial(this.typeObj)
              })
            } else {
              // 2345
              if (
                _this.t_index == 2 ||
                _this.t_index == 3 ||
                _this.t_index == 4 ||
                _this.t_index == 5
              ) {
                this.$nextTick(function () {
                  this.chartDetial3(this.typeObj)
                })
              } else {
                // 1大坝渗流
                if (_this.typeObj.series.length == 0) {
                  this.isShowGZ = true
                }
                this.$nextTick(function () {
                  this.chartDetial2(this.typeObj)
                })
              }
            }
          } else {
            this.isShowGZ = true
          }
        })
    },
    chartDetial3(item, unit) {
      // console.log("0000000000：", item);
      let myChart3 = this.$echarts.init(this.$refs.main3)
      // 清除已有的数据
      myChart3.clear()
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color: ['#5470c6'],
        // grid: {
        //   left: "3%",
        //   right: "4%",
        //   bottom: "3%",
        //   containLabel: true
        // },
        grid: { x: 60, y: 70, x2: 40, y2: 25 },
        xAxis: [
          {
            type: 'category',
            // data: ["1#", "2#", "3#", "4#", "5#", "6#", "7#"],
            data: item.legend.data,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff',
                width: 0,
                type: 'solid'
              }
            },
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              // formatter: "{value}",
              formatter: function (param) {
                // console.log(param);
                var value = param
                return value + item.unit
              }
            }
          }
        ],
        series: item.series
        // series: [
        //   {
        //     name: "沉降",
        //     type: "bar",
        //     barWidth: "60%",
        //     data: [-0.93, 0.22, -1.32, -0.82, -1.54, -1.96, -1.22]
        //   }
        // ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart3.setOption(option)
    },
    chartDetial2(item, unit) {
      // console.log("----------", item.series);
      let myChart2 = this.$echarts.init(this.$refs.main2)
      // 清除已有的数据
      myChart2.clear()
      const colors = ['#5470C6', '#91CC75', '#EE6666']
      let option = {
        color: colors,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // type: 'cross'
          }
        },
        // grid: { x: 60, y: 70, x2: 80, y2: 25 },
        grid: { x: 60, y: 70, x2: 40, y2: 25 },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        legend: {
          // data: ["J1", "J2", "J3", "J4", "T1", "T2", "T3"],
          data: item.legend.data,
          // data: ["1#", "2#", "3#", "4#", "5#", "6#", "7#"],
          x: 'center',
          y: '20px',
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff',
                width: 0,
                type: 'solid'
              }
            },
            // name: item.unit,
            color: '#fff',
            // data: [
            //   "1+100",
            //   "1+210",
            //   "1+400",
            //   "1+600",
            //   "1+700",
            //   "1+800",
            //   "2+100"
            // ],
            data: item.xAxis
            // data: ["1#", "2#", "3#", "4#", "5#", "6#", "7#"]
          }
        ],
        yAxis: [
          {
            type: 'value',
            // name: '左侧',
            position: 'left',
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              // formatter: "{value}",
              formatter: function (param) {
                // console.log(param);
                var value = param
                return value + item.unit
              }
            }
          }
          // {
          //   type: "value",
          //   // name: '右侧',
          //   position: "right",
          //   alignTicks: true,
          //   // offset: 80,
          //   axisLine: {
          //     show: true,
          //     lineStyle: {
          //       color: "#fff"
          //     }
          //   },
          //   axisLabel: {
          //     // formatter: "{value} m"
          //     formatter: function(param) {
          //       // console.log(param);
          //       var value = param;
          //       return value + item.unit;

          //       // return (
          //       //   '<div style="font-size: 16px;"> ' + value + value + "</div>"
          //       // );
          //     }
          //   }
          // }
        ],
        series: item.series
        // series: [
        //   {
        //     name: "1#",
        //     type: "bar",
        //     yAxisIndex: 0,
        //     data: ["-0.93"]
        //   },
        //   {
        //     name: "2#",
        //     type: "bar",
        //     yAxisIndex: 1,
        //     data: ["0.22"]
        //   },
        //   {
        //     name: "3#",
        //     type: "bar",
        //     yAxisIndex: 1,
        //     data: ["-1.32"]
        //   },
        //   {
        //     name: "4#",
        //     type: "bar",
        //     yAxisIndex: 1,
        //     data: ["-0.82"]
        //   },
        //   {
        //     name: "5#",
        //     type: "bar",
        //     yAxisIndex: 1,
        //     data: ["-1.54"]
        //   },
        //   {
        //     name: "6#",
        //     type: "bar",
        //     yAxisIndex: 1,
        //     data: ["-1.96"]
        //   },
        //   {
        //     name: "7#",
        //     type: "bar",
        //     yAxisIndex: 1,
        //     data: ["-1.22"]
        //   }
        // ]
        // series: [
        //   {
        //     name: "沉降1#",
        //     type: "bar",
        //     yAxisIndex: 0,
        //     data: ["-0.97"]
        //   },
        //   {
        //     name: "沉降2#",
        //     type: "bar",
        //     yAxisIndex: 1,
        //     data: ["0.19"]
        //   },
        //   {
        //     name: "沉降3#",
        //     type: "bar",
        //     yAxisIndex: 1,
        //     data: ["-1.28"]
        //   },
        //   {
        //     name: "沉降4#",
        //     type: "bar",
        //     yAxisIndex: 1,
        //     data: ["-0.90"]
        //   },
        //   {
        //     name: "沉降5#",
        //     type: "bar",
        //     yAxisIndex: 1,
        //     data: ["-1.64"]
        //   },
        //   {
        //     name: "沉降6#",
        //     type: "bar",
        //     yAxisIndex: 1,
        //     data: ["-2.02"]
        //   },
        //   {
        //     name: "沉降7#",
        //     type: "bar",
        //     yAxisIndex: 1,
        //     data: ["-1.21"]
        //   }
        // ]

        // series: [
        //   {
        //     name: "J1",
        //     type: "bar",
        //     yAxisIndex: 0,
        //     data: [1, 2, 3, 4, 5, 6, 7]
        //   },
        //   {
        //     name: "J2",
        //     type: "bar",
        //     yAxisIndex: 1,
        //     data: [1, 2, 3, 4, 5, 6, 7]
        //   },
        //   {
        //     name: "J3",
        //     type: "bar",
        //     yAxisIndex: 1,
        //     data: ["-", 2, 3, 4, 5, 6, 7]
        //   },
        //   {
        //     name: "J4",
        //     type: "bar",
        //     yAxisIndex: 1,
        //     data: [1, 2, 3, 4, 5, 6, 7]
        //   },
        //   {
        //     name: "T1",
        //     type: "bar",
        //     yAxisIndex: 1,
        //     data: [1, 2, 3, 4, 5, 6, 7]
        //   },
        //   {
        //     name: "T2",
        //     type: "bar",
        //     yAxisIndex: 1,
        //     data: [1, 2, 3, 4, 5, 6, 7]
        //   },
        //   {
        //     name: "T3",
        //     type: "bar",
        //     yAxisIndex: 1,
        //     data: [1, 2, 3, 4, 5, 6, 7]
        //   }
        // ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart2.setOption(option)
    },
    chartDetial(item, unit) {
      // console.log("===========", item);
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(this.$refs.main)
      // 清除已有的数据
      myChart.clear()
      // 指定图表的配置项和数据
      let option = {
        //调整此处大小即可控制空白
        // grid: { x: 60, y: 45, x2: 40, y2: 35 },
        grid: { x: 60, y: 70, x2: 40, y2: 25 },
        xAxis: {
          type: 'category',
          // name: this.alldate[this.datecheck].type == "day" ? "时" : "",
          boundaryGap: false,
          data: item.x_value,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.6)'
            }
          },
          axisLabel: {
            // interval: 0, // 显示所有标签
            // rotate: 40
            //x轴间隔显示
            interval: 'auto'
          }
        },
        dataZoom: [
          {
            type: 'slider', //滑动条型数据区域缩放组件
            realtime: true, //拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新。
            start: 0, //数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
            //              end: 100,  // 数据窗口范围的结束百分比。范围是：0 ~ 100
            height: 100,
            endValue: 66, //数据窗口范围的结束数值。如果设置了 dataZoom-inside.end 则 endValue 失效
            fillerColor: 'rgba(255, 255, 255, 0)', // 滚动条颜色
            borderColor: 'rgba(255, 255, 255, 0)',
            handleSize: 0, // 两边手柄尺寸
            showDetail: false, // 拖拽时是否展示滚动条两侧的文字
            top: '96%', //组件离容器上侧的距离
            zoomLock: true // 是否只平移不缩放
            // moveOnMouseMove:true, //开启鼠标移动窗口平移
            // zoomOnMouseWheel :true, //开启鼠标滚轮缩放
          },
          {
            type: 'inside', //内置型数据区域缩放组件
            // start: 0,
            //              end: 100,
            endValue: 24, // 最多12个
            zoomOnMouseWheel: false, // 关闭鼠标滚轮缩放
            moveOnMouseWheel: false, // 开启鼠标滚轮窗口平移
            moveOnMouseMove: false // 开启鼠标移动窗口平移
          }
        ],
        yAxis: {
          type: 'value',
          // name: "m",
          // name: unit,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#BFBFBF'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#ccc'],
              width: 1,
              type: 'dashed'
            }
          },
          axisLabel: {
            // formatter: "{value}",
            formatter: function (param) {
              // console.log(param);
              var value = param
              return value + item.unit
            }
          }
          // axisLabel:{
          //   rotate:45,
          // },
        },
        tooltip: {
          // trigger: "item"
          trigger: 'axis',
          formatter: function (param) {
            // console.log(param[0]);
            var value = param[0]
            return (
              '<div style="font-size: 16px;"> ' +
              value.name +
              '：' +
              value.value +
              '</div>'
            )
          }
        },

        label: {
          show: false,
          position: 'bottom',
          textStyle: {
            fontSize: 20
          }
        },
        textStyle: {
          color: '#fff'
        },

        series: [
          {
            type: 'line',
            smooth: true, //是否平滑曲线显示
            // barGap: 0,
            color: ['rgba(91,143,249,0.7)'],

            symbolSize: 0,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(91,143,249,0.7)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(91,143,249,0)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },

            // yAxisIndex: 0,
            // data: _this.orderList,
            data: item.y_value
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    //小分类
    changeDate(index) {
      // console.log("changeDate-index:", index);
      this.datecheck = index
      this.getDatas()
      /* var params = this.params
      if (!params) {
        return
      }
      this.islook = false
      this.safe_realtime_history(params, false) */
      // this.safe_realtime_history("", false);
    },
    addressData(item) {
      if (item == null || item == '') {
        return '--'
      } else {
        var data = JSON.parse(item)
        return data.poiname
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import url("../../assets/css/unity.scss");

.unity-body-div {
  // padding: 0px 3vw;
  // padding-top: 35px;
  // padding-bottom: 35px;

  /*background: rgba(5, 15, 26, 0.5) !important;*/
  // padding: 0;
  padding: 0px 32px 8px 32px;
}

.unity-body-center {
  // margin-top: 12px;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  // height: 230px;
  height: 330px;
  align-items: center;
  justify-content: center;
  // padding: 11px 6.8vw;
  border: 1px solid rgba(255, 255, 255, 0.6);
  overflow: hidden;
  // height: 100%;

  .chart {
    width: 100%;
    height: 100%;
    z-index: 99999;
  }
}

.unity-body-center_tablee {
  margin-top: 12px;
  //display: flex;
  width: 100%;
  box-sizing: border-box;
  // height: 230px;
  align-items: center;
  //justify-content: center;
  // padding: 11px 6.8vw;
  border: 1px solid rgba(255, 255, 255, 0.6);
  overflow: hidden;
}

.unity-body-center-right {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.unity-body-center-left-top {
  // margin: 0 auto;
  display: flex;
  // flex-direction: column;
  align-items: center;

  font-size: 18px;
  font-family: siyuan_bold;
  font-weight: 500;
  color: #ffffff;
}

table {
  width: 100%;
  height: 100%;
  // border: 1px solid #000;
  // border: 1px dashed #000;
  border-collapse: collapse;
  box-sizing: border-box;
}

table tr:last-child td {
  //border-bottom: 0px;
  //box-sizing: border-box;
}

td,
.device-monitor-item {
  // padding: 8px 8px 8px 10vw;
  padding: 8px 8px 8px 33px;
  color: #ffffff;
  font-size: 14px;
}

td {
  align-items: center;
  // text-align: center;
  width: 50%;
  // min-height: 36.5px;
  // border: 1px solid red;
  box-sizing: border-box;
}

.td1 {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
  border-right: 1px dashed rgba(255, 255, 255, 0.6);
}

.td2 {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
  border-left: 1px dashed rgba(255, 255, 255, 0.6);
}

.tb_td3 {
  color: #ffffff;
  font-size: 14px;
  padding: 8px 8px 8px 33px;
}

.color-gradient-blue_device {
  // /*主色调 */
  // background: #3083ff;
  // /*IE浏览器中由主色#007238，到#018944的颜色渐变设置*/
  // background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #3083ff), color-stop(1, #2dc1ff));
  // /*火狐浏览器中由主色#007238，到#018944的颜色渐变设置*/
  // background: -ms-linear-gradient(left, #3083ff, #2dc1ff);
  // /*谷歌浏览器中由主色#007238，到#018944的颜色渐变设置*/
  // background: -moz-linear-gradient(left bottom, #3083ff 0%, #2dc1ff 100%);
  // /*欧朋浏览器中由主色#007238，到#018944的颜色渐变设置*/
  // background: -o-linear-gradient(left, #3083ff, #2dc1ff);
  // /*filter:滤镜名（参数)*/
  // filter: progid:dximagetransform.microsoft.gradient(startColorStr='#3083ff', EndColorStr='#2dc1ff');
  // -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2dc1ff',EndColorStr='#3083ff')";
  background: linear-gradient(-77deg, #2dc1ff 0%, #3083ff 99%);
}

.state1 {
  color: #41d12dff;
  border: 1px solid #41d12dff;
}

.state2 {
  color: #fcc70e;
  border: 1px solid #fcc70e;
}

.state3 {
  color: #ff4a53;
  border: 1px solid #ff4a53;
}

.unity-body-center-body-btn {
  display: flex;

  .unity-body-center-right-btn {
    //width: 290px;
    //height: 400px;
    //padding: 10px;
    width: 310px;
    height: 420px;
    overflow: hidden;
    position: relative;
    // left: 15px;
    left: 20px;
    top: 51px;
    border: 1px solid rgba(255, 255, 255, 0.6);
  }

  .unity-body-center-left-btn {
    width: 100%;
    // width: 567px;
    // width: 575px;
    height: 100%;
    position: relative;
    // overflow: hidden;
  }

  .unity-body-center-left-btn-center {
    // position: absolute;
    // left: 0;
    // top: 0;
    // bottom: 0;
    // right: -5px;
    // padding-right: 5px;
    .unity-body-center-left-tab {
      height: 40px;
    }

    .unity-body-center-left-gun {
      position: absolute;
      left: 0;
      top: 100px;
      bottom: 0;
      right: -5px;
      padding-right: 5px;
      overflow-y: scroll;
      //tab距离
      margin-top: 12px;
    }

    .unity-body-center-left-gun::-webkit-scrollbar {
      width: 6px;
      border-radius: 3px;
      background-color: rgba(0, 0, 0, 0);
    }

    .unity-body-center-left-gun::-webkit-scrollbar-thumb {
      border-radius: 3px;
      // width: 0px;
      // height: 0px;
      /*主色调 */
      background: #3083ff;
      /*IE浏览器中由主色#007238，到#018944的颜色渐变设置*/
      background: -webkit-gradient(
          linear,
          left top,
          right bottom,
          color-stop(0, #3083ff),
          color-stop(1, #2dc1ff)
      );
      /*火狐浏览器中由主色#007238，到#018944的颜色渐变设置*/
      background: -ms-linear-gradient(left, #3083ff, #2dc1ff);
      /*谷歌浏览器中由主色#007238，到#018944的颜色渐变设置*/
      background: -moz-linear-gradient(left bottom, #3083ff 0%, #2dc1ff 100%);
      /*欧朋浏览器中由主色#007238，到#018944的颜色渐变设置*/
      background: -o-linear-gradient(left, #3083ff, #2dc1ff);
      /*filter:滤镜名（参数)*/
      filter: progid:dximagetransform.microsoft.gradient(startColorStr='#3083ff', EndColorStr='#2dc1ff');
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2dc1ff',EndColorStr='#3083ff')";
    }
  }

  // .unity-body-center-left-btn-center::-webkit-scrollbar {
  //   width: 6px;
  //   border-radius: 3px;
  //   background-color: rgba(0, 0, 0, 0);
  // }

  // .unity-body-center-left-btn-center::-webkit-scrollbar-thumb {
  //   border-radius: 3px;
  //   // width: 0px;
  //   // height: 0px;
  //   /*主色调 */
  //   background: #3083ff;
  //   /*IE浏览器中由主色#007238，到#018944的颜色渐变设置*/
  //   background: -webkit-gradient(
  //     linear,
  //     left top,
  //     right bottom,
  //     color-stop(0, #3083ff),
  //     color-stop(1, #2dc1ff)
  //   );
  //   /*火狐浏览器中由主色#007238，到#018944的颜色渐变设置*/
  //   background: -ms-linear-gradient(left, #3083ff, #2dc1ff);
  //   /*谷歌浏览器中由主色#007238，到#018944的颜色渐变设置*/
  //   background: -moz-linear-gradient(left bottom, #3083ff 0%, #2dc1ff 100%);
  //   /*欧朋浏览器中由主色#007238，到#018944的颜色渐变设置*/
  //   background: -o-linear-gradient(left, #3083ff, #2dc1ff);
  //   /*filter:滤镜名（参数)*/
  //   filter: progid:dximagetransform.microsoft.gradient(startColorStr='#3083ff', EndColorStr='#2dc1ff');
  //   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2dc1ff',EndColorStr='#3083ff')";
  // }
}

.device-monitor-list {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 100%;
}

/deep/ .device-monitor-list .el-col:nth-child(2n) .device-monitor-item {
  border-left: 1px dashed rgba(255, 255, 255, 0);
}

/deep/ .device-monitor-list .el-col:nth-child(2n-1) .device-monitor-item {
  border-right: 1px dashed rgba(255, 255, 255, 0.6);
  padding-right: calc(8px + 2.4vw);
}

.device-monitor-item {
  // border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
  // border-right: 1px dashed rgba(255, 255, 255, 0.6);
}

.device-monitor-item.no-border-bottom {
  border-bottom: unset;
}
</style>

<style lang="scss">
.deviceDetails {
  width: 100%;
  height: 100%;
  color: #fff;

  // element标签页样式修改
  .el-tabs__header {
    margin: 0 !important;
  }

  .el-tabs__item {
    color: #fff !important;
    font-size: 18px !important;
  }

  .el-tabs__active-bar {
    height: 3px !important;
  }

  .el-tabs__item.is-active {
    color: #fff !important;
  }

  .el-tabs__nav-next,
  .el-tabs__nav-prev {
    font-size: 20px !important;
    color: #fff !important;
    top: -2px !important;
  }

  .el-tabs__nav-wrap.is-scrollable {
    padding: 0 30px !important;
  }

  .el-tabs__active-bar {
    height: 4px !important;
    background: linear-gradient(-77deg, #2dc1ff 0%, #3083ff 99%) !important;
  }

  .el-tabs__nav-wrap::after {
    background: none !important;
  }

  .unity-body-center .chart {
    z-index: 1;
  }
}

.change_date {
  position: absolute;
  right: 0px;
  top: 9px;
  display: flex;
  z-index: 9999999999;
}

.choosedate {
  padding: 2px 5px;
  width: 70px !important;
  height: 24px;
  margin-right: 9px;
  border-radius: 2px;
  font-weight: 400;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(37deg, #2dc1ff 0%, #3083ff 99%);
  border: 1px solid #0083fd;
}

.change_date_item {
  padding: 2px 5px;
  width: 70px !important;
  height: 24px;
  margin-right: 9px;
  border: 1px solid #0083fd;
  border-radius: 2px;
  font-weight: 400;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guzhang {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
</style>
